<template>
  <div class="components-container">

    <div class="editor-header">
      <el-input v-model="richTextInfo.title" class="md-title" placeholder="请输入内容" size="small"/>
      <el-button class="md-btn_save" size="small" type="primary" icon="el-icon-edit" @click="getHtml">保存</el-button>
    </div>

    <div class="editor-container">
      <markdown-editor ref="markdownEditor" v-model="richTextInfo.body" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="380px"/>
    </div>

  </div>
</template>

<script>
import MarkdownEditor from '@/components/MarkdownEditor'
import { parseTime } from '@/utils/index.js'

export default {
  name: 'Markdown',
  components: { MarkdownEditor },
  props: {
    richTextInfo: {
      type: Object,
      default() {
        return {
          title: '',
          body: ''
        }
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    getHtml() {
      const { title } = this.richTextInfo
      // 没设置标题
      if (this.richTextInfo.title === '') {
        this.$message({
          message: '请设置文件名',
          type: 'warning'
        })
        return
      }

      const html = this.$refs.markdownEditor.getHtml()
      console.log(this.html)

      // 新建一条文件记录
      const newFileRecord = {
        filename: title,
        filetype: '.md',
        filesize: '-',
        author: 'test',
        timestamp: parseTime(new Date()),
        content: html
      }
      this.$emit('add-file', newFileRecord)
    }
  }
}
</script>

<style scoped>
.editor-container{
  margin-bottom: 30px;
}
.tag-title{
  margin-bottom: 5px;
}

.editor-header::before,.editor-header::after{
  content: "";
  display: block;
  clear: both;
}
.md-title{
  width: 50%;
}
.md-btn_save{
  float: right;
  margin-bottom:15px;
}
</style>
